{layout name="common/layout" /}
<style>
	.discount_main {
		background-color: #f1f1f1;
		box-sizing: border-box;
		padding: 15px;
	}

	.discount_main>h3 {
		padding: 0;
		font-size: 14px;
		color: #333;
		line-height: 30px;
		height: 30px;
		color: #2196f3 !important
	}

	.discount_list {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		padding-top: 30px;
		background-color: #fff;
		max-width: 630px;
		border-radius: 5px;
		padding: 15px;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.discount_single {
		width: 100px;
		margin-right: 30px;
	}

	.discount_single h3 {
		text-align: center;
		height: 30px;
		line-height: 30px;
		width: 100%;
		font-size: 14px;
		color: #333;
		padding: 0;
		box-sizing: border-box;
		border: 1px solid #dadada;
		border-radius: 3px;
		margin-bottom: 10px;
	}

	.discount_single>div {
		margin: 0;
		border: 1px solid #dadada;
		height: 30px;
		line-height: 30px;
		width: 100%;
		text-align: center;
		font-size: 14px;
		box-sizing: border-box;
		border-radius: 3px;
		background-color: transparent;
		display: flex;
	}

	.discount_single>div>input {
		width: 80px;
		padding: 5px;
		text-align: center;
		font-size: 14px;
		box-sizing: border-box;
		margin: 0;
	}

	.discount_single>div>span {
		display: inline-block;
		border-left: 1px solid #dadada;
		width: 20px;
		height: 100%;
		text-align: center;
	}

	.discount_main_all {
		background-color: #fff;
		padding: 15px;
		padding-bottom: 0;
		border-bottom: 15px solid #fff;
		border-radius: 5px;
		max-width: 900px;
		max-height: 300px;
		margin-bottom: 10px;
		overflow-y: auto;
		box-sizing: border-box;
	}

	.discount_main_allSingle {
		height: 50px;
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		margin-bottom: 2px;
		border-radius: 3px;
		position: relative;
	}

	.discount_main_allSingle>label {
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		cursor: pointer;
	}

	.discount_main_allSingle>input {
		margin: 0 15px;
		height: 15px;
		margin-right:5px;
		width: 15px;
		cursor: pointer;
		display: block;
		flex-shrink: 0;
	}

	.discount_main_allSingle>img {
		height: 40px;
		width: 40px;
		display: block;
		margin-right: 10px;
		border-radius: 3px;
		margin-left: 10px;
	}

	.discount_main_allSingle>p {
		flex-grow: 1;
		line-height: 15px;
		overflow: hidden;
		font-size: 14px;
		color: #333;
		margin: 0;
	}

	.discount_main_allCheckInput {
		background-color: #fff;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 15px;
		font-size: 14px;
		color: #333;
		max-width: 900px;
		padding-left: 30px;
	}

	.discount_main_allCheckInput>input {
		height: 15px;
		width: 15px;
		margin: 0;
		margin-right: 5px;
	}

	.discount_main_btn {
		margin: 20px auto;
	}

	.discount_main--read {
		position: relative;
	}

	.discount_main--read:after {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 180px;
		content: "";
		display: block;
		z-index: 999;
	}
	[v-cloak] { display: none }
</style>
<div class="Hui-article-box" style="margin-top: 37px;">
	<div class="breadcrumb"><i class="Hui-iconfont"></i>商品
		<span class="c-gray en">&gt;</span> 商品批量设置
	</div>
	<div v-cloak class="Hui-article discount_main" :class="{'discount_main--read':readonly==1}">
		<h3>续期折扣设置</h3>
		<ul class="discount_list">
			<li v-show="(countArray[index]!=''&&readonly==1)||readonly!=1" class="discount_single" v-for="item,index in dataType">
				<h3>{{item.name}}</h3>
				<div>
					<input @blur="percent(index)" type="number" min="0" max="100" v-model="countArray[index]">
					<span>%</span>
				</div>
			</li>
		</ul>
		<h3 v-show="readonly!=1">请选择设置商品</h3>
		<div class="discount_main_allCheckInput" v-show="readonly!=1">
			<input @change="checkData()" v-model="checkAll" value="all" type="checkbox"> 全选
		</div>
		<ul v-show="readonly!=1" style="padding-top:0" class="discount_main_all">
			<li class="discount_main_allSingle" v-for="item,index in allGoodsList">
				<label :for="'count'+index"></label>
				<input @change="dataChcek()" v-model="checkReslut" :id="'count'+index" :value="item.goods_id" type="checkbox">
				<img :src="item.goods_main_pic" alt="log">
				<p>{{item.goods_name}}</p>
			</li>
		</ul>
		<h3 v-show="readonly!==1&&checkReslut.length>0">已选商品</h3>
		<ul v-show="checkReslut[0]" class="discount_main_all">
			<li class="discount_main_allSingle" v-for="item in checkedGoodsList">
				<img :src="item.goods_main_pic" alt="log">
				<p>{{item.goods_name}}</p>
			</li>
		</ul>

		<button @click="saveDate" v-show="readonly!=1" class="discount_main_btn" type="button">保存</button>
		<button @click="change" v-show="readonly==1" class="discount_main_btn" type="button">修改</button>
	</div>
</div>

<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
	var app = new Vue({
		el: ".discount_main",
		data() {
			return {
				readonly: 1,
				countArray: ["100", "100", "100", "100", "100"],
				dataType: [{
					name: '日',
					count: "100"
				}, {
					name: '周',
					count: ""
				}, {
					name: '月',
					count: ""
				}, {
					name: '季',
					count: ""
				}, {
					name: '年',
					count: ""
				}, ],
				allGoodsList: [],
				checkedGoodsList: [],
				/* 最终结果 */
				checkReslut: [],
				checkAll: []
			}
		},
		computed: {

		},
		methods: {
			checkData() {
				let self = this;
				if (this.checkAll.length == 0) {
					this.checkReslut = [];
					this.checkedGoodsList = [];
				} else {
					self.checkReslut = [];
					for (let item of self.allGoodsList) {
						self.checkReslut.push(item.goods_id);
					}
					self.dataChcek();
				}
			},
			dataChcek() {
				if (this.checkReslut.length !== this.allGoodsList.length) {
					this.checkAll = [];
				} else {
					this.checkAll = ["all"];
				}
				let self = this;
				let arr = [];
				for (let item of self.checkReslut) {
					for (let ite of self.allGoodsList) {
						if (item == ite.goods_id) {
							arr.push(ite);
						}
					}

				}
				this.checkedGoodsList = arr;
			},
			change() {
				this.readonly = 0;
			},
			percent: function (i) {
				var self = this;
				setTimeout(function () {
					if (self.countArray[i] == "") {
						return false;
					}
					if (self.countArray[i] < 0) {
						self.countArray[i] = 0;
					} else if (self.countArray[i] > 100) {
						self.countArray[i] = 100;
					} else {
						self.countArray[i] = (self.countArray[i] - 0).toFixed(0);
					}
					var data = self.countArray;
					self.countArray = [];
					self.countArray = data;
				}, 100);
			},
			/* 保存参数 */
			saveDate() {
				let self = this;
				let arr = [];
				for (let item of this.countArray) {
					if (item == "") {
						arr.push("-1");
					} else {
						arr.push(item);
					}
				}
				if(this.checkReslut.length==0){
					layer.msg("请选择需要设置的商品", {
						time: 2000
					});
					return false;
				}
				layer.confirm('是否确认保存设置', {
					btn: ['确定', '取消'] //按钮
				}, function () {

					$.ajax({
						url: baseUrl + "/api/goods/batchUpdateDiscount",
						type: "POST",
						data: {
							data: {
								goodsAttr: arr,
								goodsList: self.checkReslut
							}
						},
						async: true,
						dataType: "json",
						success: function (response) {
							if (response.status == 1) {
								layer.msg("设置成功", {
									time: 2000
								});
								setTimeout(() => {
									window.location.reload();
								}, 1500);
							} else {
								layer.msg("设置失败，请重新尝试", {
									time: 2000
								});
							}
						},
						error: function (error) {
							layer.msg("设置失败，请重新尝试", {
								time: 2000
							});
						}
					});
				}, function () {
					layer.closeAll();
					return false;
				});

			},
			getGoodsList() {
				let self = this;
				$.ajax({
					url: baseUrl + "/api/goods/getMerchantGoods",
					type: "GET",
					data: {

					},
					async: true,
					dataType: "json",
					success: function (response) {
						if (response.status == 1) {
							self.allGoodsList = response.data;
							$.ajax({
								url: baseUrl + "/api/goods/getUpdatedAttr",
								type: "GET",
								data: {},
								async: true,
								dataType: "json",
								success: function (response) {
									if (response.status == 1) {
										/*数据渲染 */
										self.countArray = response.data.discount_str;
										for (let i=0;i< self.countArray.length;i++) {
											if ( self.countArray[i] == -1) {
												self.countArray[i]= "";
											}
										}
										self.checkReslut = response.data.goods_ids;
										let arr = [];
										for (let item of self.checkReslut) {
											console.log(item);
											for (let ite of self.allGoodsList) {
												if (item == ite.goods_id) {
													arr.push(ite);
												}
											}
										}
										self.checkedGoodsList = arr;
									} else {
										self.readonly = 0;
									}
								},
								error: function (error) {

								}
							});
						} else {
						}
					},
					error: function (error) {

					}
				});
			}
		},
		mounted() {
			let self = this;
			self.getGoodsList();
			/* 获取用户默认设置数据 */
		}
	})
</script>